<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j"
	template="../templates/template.xhtml">

	<ui:define name="body">
		<h:form>
		<table width="100%">
			<tr>
				<td align="left">
					<h2>
						<h:outputText value="#{titulos.ASIGNAR_TICKET}" />
					</h2>
				</td>
			</tr>
			<tr>
				<td align="left">
				<f:view encoding="iso-8859-1">
				
				<rich:panelBar height="400">
							
					<h:outputText value="#{asignacionTicketAction.iniciarAsignarTicket}" />
					
						<rich:panelBarItem label="Tickets No Asignados">
							<!-- tabla de ticket no asignados -->
							<rich:dataTable id="tablaTickets" rows="10" border="1"
								style="width: 100%; "
								value="#{asignacionTicketAction.lista_tickets_no_asignados}"
								var="data" binding="#{asignacionTicketAction.radioDataTableTickets}"
								reRender="scTabla1"
								onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
								onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
								<f:facet name="header">
									<rich:datascroller id="scTabla1" for="tablaTickets"
										selectedStyle="font-weight:bold" align="center" />
								</f:facet>
								
								<rich:column sortBy="#{data.idTicket}" width="30px;">
									<f:facet name="header">
										<h:outputText value="N° Ticket" />
									</f:facet>
									<div align="left"><h:outputText
										value="#{data.idTicket}" />
										</div>
								</rich:column>
								<rich:column sortBy="#{data.tipoTicket}" width="30px;">
									<f:facet name="header">
										<h:outputText value="Tipo" />
									</f:facet>
									<div align="left"><h:outputText value="#{data.tipoTicket}" />
									</div>
								</rich:column>
								<rich:column sortBy="#{data.descripcionCorta}" width="80px;">
									<f:facet name="header">
										<h:outputText value="Descripcion" />
									</f:facet>
									<div align="left"><h:outputText
										value="#{data.descripcionCorta}" /></div>
								</rich:column>
								<rich:column sortBy="#{data.fecha}" width="30px;">
									<f:facet name="header">
										<h:outputText value="Fecha Registro" />
									</f:facet>
									<div align="left"><h:outputText
										value="#{data.fecha}" /></div>
								</rich:column>
								<rich:column sortBy="#{data.nombreSistema}" width="50px;">
									<f:facet name="header">
										<h:outputText value="Sistema" />
									</f:facet>
									<div align="left"><h:outputText
										value="#{data.nombreSistema}" /></div>
								</rich:column>
								<rich:column width="20px;">
									<f:facet name="header">
										<h:outputText value="Seleccionar" />
									</f:facet>
									<div align="center"><h:selectOneRadio styleClass="none"
										onclick="dataTableSelectOneRadio(this)">
										<f:selectItem itemValue="#{data.seleccionado}" />
										<a4j:support event="onchange"
											action="#{asignacionTicketAction.establecerElementoSeleccionadoTicket}"
											ajaxSingle="true" />
									</h:selectOneRadio></div>
								</rich:column>
								<f:facet name="footer">
									<rich:columnGroup id="groupColumnResultadoEncontrado"
										styleClass="footerTable">
										<rich:column colspan="6">
											<h:panelGrid id="regEncon">
												<h:outputText id="txtRegEncon"
													value="Leo :)"
													styleClass="footerTableText" />
											</h:panelGrid>
										</rich:column>
									</rich:columnGroup>
								</f:facet>
							</rich:dataTable>
							
							
							<!--  -->
						</rich:panelBarItem>
						
						<rich:panelBarItem label="Asignar Ticket">
						<!-- tabla de desarrolladores -->	
							
							
							<rich:dataTable id="tabla1" rows="10" border="1"
								style="width: 100%; "
								value="#{asignacionTicketAction.lista_analistas}"
								var="data" binding="#{asignacionTicketAction.radioDataTableAnalistas}"
								reRender="scTabla1"
								onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
								onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
								<f:facet name="header">
									<rich:datascroller id="scTabla1" for="tabla1"
										selectedStyle="font-weight:bold" align="center" />
								</f:facet>
								
								<rich:column sortBy="#{data.idUsuario}" width="70px;">
									<f:facet name="header">
										<h:outputText value="Codigo" />
									</f:facet>
									<div align="left">
									<h:outputText value="#{data.idUsuario}" /></div>
								</rich:column>
								
								<rich:column sortBy="#{data.apellidoPaterno}" width="70px;">
								<f:facet name="header">
										<h:outputText value="Analista" />
									</f:facet>
									<div align="left">
									<h:outputText value="#{data.apellidoPaterno}" /></div>
								</rich:column>
								
								<rich:column sortBy="#{data.especialidad}" width="70px;">
									<f:facet name="header">
										<h:outputText value="Especialidad" />
									</f:facet>
									<div align="left">
									<h:outputText value="#{data.especialidad}" /></div>
								</rich:column>
								
								
								<rich:column sortBy="#{data.telefonoCelular}" width="70px;">
									<f:facet name="header">
										<h:outputText value="celular" />
									</f:facet>
									<div align="left">
									<h:outputText value="#{data.telefonoCelular}" /></div>
								</rich:column>
								
								<rich:column sortBy="#{data.carga}" width="70px;">
									<f:facet name="header">
										<h:outputText value="Carga" />
									</f:facet>
									<div align="left">
									<h:outputText value="#{data.carga}" /></div>
								</rich:column>
								
								<rich:column width="50px;">
									<f:facet name="header">
										<h:outputText value="Asignar" />
									</f:facet>
									<div align="center">									
									<h:selectBooleanCheckbox>            					
                    					<a4j:support event="onchange"
											action="#{asignacionTicketAction.establecerElementoSeleccionado}"
											ajaxSingle="true" />		                     
                					</h:selectBooleanCheckbox>				
									</div>						
								</rich:column>
								
								<f:facet name="footer">
									<rich:columnGroup id="groupColumnResultadoEncontrado"
										styleClass="footerTable">
										<rich:column colspan="6">
											<h:panelGrid id="regEncon">
												<h:outputText id="txtRegEncon"
													value="footer"
													styleClass="footerTableText" />
											</h:panelGrid>
										</rich:column>
									</rich:columnGroup>
								</f:facet>
							</rich:dataTable>
								
						<!--  -->
						</rich:panelBarItem>
						
					</rich:panelBar>
					
					</f:view >
					
						
					</td>
			</tr>

			<tr>
				<td><rich:spacer width="10px" style="height: 22px; " /></td>
			</tr>

			<tr>
				<td align="center"><h:panelGrid columns="3"
						style="width:150px;">
						<h:commandButton value="Limpiar"
							style="height: 37px; width: 137px; " />
						<rich:spacer width="10px" height="30px" />
						<h:commandButton value="Registrar" action="#{asignacionTicketAction.registrar}"
							style="height: 37px; width: 137px; " />
					</h:panelGrid>
				</td>
			</tr>
		</table>
		</h:form >
	</ui:define>
</ui:composition>